{extend name="../../admin/view/main"}

{block name="content"}
{include file='shop/goods/formstyle'}
<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" id="GoodsForm">
    <div class="layui-card-body">
        <!--{notempty name='cates'}-->
        <label class="layui-form-item block relative">
            <span class="help-label label-required-prev"><b>所属分类</b>Category Name</span>
            <select class="layui-select" lay-search  lay-filter="getcates">
                <option value="">请选择所属分类</option>
                {foreach $cates as $cate}
                <option value="{$cate.id}" data-data="{$cate.name}">{:join(' ＞ ', $cate.names)}</option>
                {/foreach}
            </select>
            <input type="hidden" name="cateids" value="{$cateIds|default=''}">
            <div class="cates">
                {notempty name='cateLists'}
                    {foreach $cateLists as $cate_key=>$cate_value}
                        <div class="cate_types pull-left">
                            <span class="cateid_name margin-left-15">{$cate_value.name}</span>
                            <span class="cateid_close margin-left-15 color-red" style="cursor: pointer">X</span>
                        </div>
                    {/foreach}
                {/notempty}
            </div>
        </label>
        <!--{/notempty}-->
        <label class="layui-form-item block relative">
            <span class="help-label"><b>商品名称</b>Goods Name</span>
            <input class="layui-input" name="name" placeholder="请输入商品名称" required value="{$vo.name|default=''}">
        </label>

        <label class="layui-form-item block relative">
            <span class="help-label"><b>所属品牌</b>Goods Brand</span>
            <select class="layui-select" lay-search name="brand">
                {notempty name="vo.brands"}
                    {foreach $vo.brands as $brand}
                        {if $vo.brand_id eq $brand.id}
                            <option selected value="{$brand.id}" data-name="{$brand.name}" >{$brand.name|default=''}</option>
                        {else}
                            <option value="{$brand.id}" data-name="{$brand.name}" >{$brand.name|default=''}</option>
                        {/if}
                    {/foreach}
                {/notempty}
            </select>
        </label>

        <div class="layui-form-item label-required-prev">
            <span class="help-label"><b>商品封面及轮播图片</b>Cover and Carousel Pictures</span>
            <b class="color-red">图片尺寸：800px * 800px</b>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="text-center">封面</th>
                    <th class="text-left" style="width:100%">轮播图片</th>
                </tr>
                <tr>
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="cover" data-max-width="500" data-max-height="500" type="hidden" value="{$vo.cover|default=''}">
                            <script>$('[name="cover"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="text-left padding-0">
                        <div class="help-images">
                            <input name="slider" data-max-width="2048" data-max-height="1024" type="hidden" value="{$vo.slider|default=''}">
                            <script>$('[name="slider"]').uploadMultipleImage();</script>
                        </div>
                    </td>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-form-item label-required-prev">
            <span class="help-label"><b>商品视频</b>Vedio</span>
            <table class="layui-table">
                <tr>
                    <td class="text-left text-top padding-0">
                        <div class="help-images">
                            <input name="vedio" data-max-width="500" data-max-height="500" type="hidden" value="">
                            <script>$('[name="vedio"]').uploadOneVideo();</script>
                        </div>
                    </td>
                </tr>
                </thead>
            </table>
        </div>
        <div class="goods-item-box">
            <div class="flex flex-wrap">
                <fieldset class="layui-bg-gray">
                    <legend><span class="layui-badge think-bg-violet">商品限购数量</span></legend>
                    <label>
                        <input class="layui-input" type="number" min="0" data-blur-number="0" name="limit_max_num" placeholder="请输入商品限购数量" value="{$vo.limit_max_num|default=0}">
                        <span class="help-block">限制每人可购买数量（为 0 时不限制）！</span>
                    </label>
                </fieldset>
<!--                <fieldset class="layui-bg-gray">-->
<!--                    <legend><span class="layui-badge think-bg-violet">设置热销标签</span></legend>-->
<!--                    <label>-->
<!--                        <label class="think-radio layui-elip">-->
<!--                            <input lay-ignore type="checkbox" name="state_hot" value="1" {notempty name='vo'}{if $vo.state_hot eq 1}checked{/if}{/notempty}>热销商品</label><br/>-->
<!--                        <span class="help-block">设置后将显示热销图标</span>-->
<!--                    </label>-->
<!--                </fieldset>-->
                <fieldset class="layui-bg-gray">
                    <legend><span class="layui-badge think-bg-violet">设置首页展示推荐</span></legend>
                    <label>
                        <label class="think-radio layui-elip"><input lay-ignore type="checkbox" name="state_home" value="1" {notempty  name='vo'}{if $vo.state_home eq 1}checked{/if}{/notempty}>首页展示</label><br/>
                        <span class="help-block">将会在首页展示</span>
                    </label>
                </fieldset>
            </div>
        </div>
        <label class="layui-form-item ">
            <span class="help-label "><b>包含服务</b>Goods Service</span>
            <div class="service_list">
                {foreach $vo.service as $sdk=>$sdv}
                    <div style="position:relative;" class="border-line padding-20 margin-right-10 pull-left service_detail">
                        <div style="position:absolute;right:10px;top: 0;color:red;cursor:pointer;" class="service_close" >X</div>
                        <label class="layui-form-item block">
                            <span class="help-label"><b>选择服务</b></span>
                            <select class="layui-select services" lay-search name="service[]" lay-filter="getservice">
                                <option value="">请选择服务</option>
                                {foreach $vo.services as $service}
                                    {if $sdv.service_id eq $service.service_id}
                                        <option selected value="{$service.service_id}" data-name="{$service.name}" data-content="{$service.summary}">{$service.name|default=''}</option>
                                    {else}
                                        <option value="{$service.service_id}" data-name="{$service.name}" data-content="{$service.summary}">{$service.name|default=''}</option>
                                    {/if}
                                {/foreach}
                            </select>
                        </label>
                        <div class="showserviceDetail">
                            <label class="layui-form-item block relative">
                                <span class="help-label"><b>服务名称:</b></span>
                                <div class="service_name">{$sdv.name|default=''}</div>
                            </label>
                            <label class="layui-form-item block relative">
                                <span class="help-label"><b>服务内容:</b></span>
                                <div class="service_content">{$sdv.summary|default=''}</div>
                            </label>
                        </div>
                    </div>
                {/foreach}
            </div>
        </label>

        <button class="layui-btn layui-btn-sm margin-bottom-10 addservice" type="button">添加服务</button>
        <label class="layui-form-item block relative">
            <span class="help-label"><b>退换货设置</b>Can Drawback</span>
            <div class="">
                <label class="think-radio layui-elip"><input lay-ignore type="radio" name="can_drawback" value="1" {notempty  name='vo'}{if $vo.can_drawback eq 1}checked{/if}{/notempty}>七天无理由退换货</label>
                <label class="think-radio layui-elip"><input lay-ignore type="radio" name="can_drawback" value="0" {notempty  name='vo'}{if $vo.can_drawback eq 0}checked{/if}{else/}checked{/notempty}>不支持退货</label>
            </div>
            </label>
        <div class="layui-form-item">
            <span class="help-label label-required-prev"><b>商品规格及商品SKU绑定</b></span>
            <button class="layui-btn layui-btn-sm margin-bottom-10" type="button" onclick="addSku()">新增规格</button>
            <div class="sku_list">
            <!--循环规格-->
                {foreach $vo.data_items as $sdk=>$sdv}
                    <div style="display:inline-block; position:relative;" class="border-line padding-20 margin-right-10 pull-left sku_detail">
                        <div style="position:absolute;right:10px;top: 0;color:red;cursor:pointer;" class="close" >X</div>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>规格名称</b></span>
                            <input class="layui-input" name="itemname[]" placeholder="请输入规格名称" required value="{$sdv.name|default=''}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>规格型号</b></span>
                            <input class="layui-input" name="skumodel[]" placeholder="请输入规格型号" value="{$sdv.key|default=''}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>SKU</b></span>
                            <input class="layui-input padding-left-0 text-center" placeholder="请输入规格SKU" required name="sku[]" value="{$sdv.sku|default=0}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>规格封面</b></span>
                            <div class="help-images">
                                <input name="itemcover" data-max-width="500" data-max-height="500" type="hidden" value="{$sdv.cover}">
                                <input name="itemcover1[]" type="hidden" value="" class="imgpath">
                                <script>$('[name="itemcover"]').uploadOneImage();</script>
                            </div>
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>市场价</b></span>
                            <input class="layui-input  padding-left-0 text-center" required placeholder="请输入市场价" name="market[]" value="{$sdv.market}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>实际销售价</b></span>
                            <input class="layui-input padding-left-0 text-center" required placeholder="请输入销售价" required name="selling[]" value="{$sdv.selling}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>库存</b></span>
                            <input class="layui-input padding-left-0 text-center" required placeholder="请输入对应库存" name="stock_total[]" value="{$sdv.stock_total}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>虚拟销售量</b></span>
                            <input class="layui-input padding-left-0 text-center" required placeholder="请输入虚拟销售量" name="virtual[]"value="{$sdv.virtual}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>排序</b></span>
                            <input type="number" class="layui-input  padding-left-0 text-center" required placeholder="请输入市场价" name="sort[]" value="{$sdv.sort}">
                        </label>
                         <label class="layui-form-item block relative">
                            <span class="help-label"><b>销售状态</b></span>
                             <label class="think-checkbox margin-0 full-width full-height block">
                                <input lay-ignore name="status[]" type="checkbox" {if $sdv.status eq 1}checked{/if}>
                            </label>
                        </label>

                    </div>
                {/foreach}
            </div>
        </div>

        <label class="layui-form-item block">
            <span class="help-label"><b>商品简介描述</b></span>
            <textarea class="layui-textarea" name="remark" placeholder="请输入商品简介描述">{$vo.remark|default=''|raw}</textarea>
        </label>

        <div class="layui-form-item block">
            <span class="help-label label-required-prev"><b>商品富文本详情</b></span>
            <textarea class="layui-hide" required name="content">{$vo.content|default=''|raw}</textarea>
        </div>

        <div class="hr-line-dashed margin-top-40"></div>
        {notempty name='vo.code'}<input name="code" type="hidden" value="{$vo.code}">{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-danger" ng-click="pageBack()" type="button">取消编辑</button>
            <button class="layui-btn" type="submit">保存商品</button>
        </div>
    </div>
</form>
{/block}
<style>
    .hide{
        display:none;
    }
</style>
{block name='script'}

<script>
        var _services = {:json_encode($vo.services)};

            let cateIds = "{$cateIds|default=''}";
            let _cate_select_ids = [];
            if(cateIds.length > 0){
                _cate_select_ids = cateIds.split(',');
            }
        $(function(){
            Close();
            cateClose();
            searchClose();
            $(".addservice").unbind().on('click',function(){
                //检测添加服务数量
                let service_len = $(".service_list").find(".service_detail").length;
                if(service_len < 5) {
                    addService()
                }else{
                    layer.msg('最多添加五种服务');
                    return false;
                }
            })
            form.render();
            layui.use(['form'], function() {
                var form = layui.form;
                form.on('select(getservice)', function (data) {
                    var name =$(".services").find("option:selected").attr('data-name');
                    var content =$(".services").find("option:selected").attr('data-content');
                    $(this).parents('.service_detail').find(".service_content").text(content);
                    $(this).parents('.service_detail').find(".service_name").text(name);
                })
                form.on('select(getcates)', function (data) {
                    let cate_name = $(data.elem).find("option:selected").attr('data-data');
                    let cate_id = data.value
                    if(_cate_select_ids.indexOf(cate_id) > -1){
                        layer.msg('已选择');
                        return false;
                    }
                    _cate_select_ids.push(cate_id);
                    $("input[name='cateids']").val(_cate_select_ids.join(','))
                    let _cate_html = '';
                    _cate_html +='<div class="cate_types pull-left">';
                    _cate_html +='<span class="cateid_name margin-left-15">'+cate_name+'</span>';
                    _cate_html +='<span class="cateid_close margin-left-15 color-red" data-data="'+cate_id+'" style="cursor: pointer">X</span>';
                    _cate_html +='</div>';
                    $(".cates").append(_cate_html)
                    cateClose()
                })
            })
        })
        function addService(){
            var _service_html = '<div style="display:inline-block; position:relative;" class="border-line padding-20 margin-right-10 pull-left service_detail">';
                    _service_html += '<div style="position:absolute;right:10px;top: 0;color:red;cursor:pointer;" class="service_close" >X</div>';
                    _service_html += '<label class="layui-form-item block relative">';
                        _service_html += '<span class="help-label"><b>选择服务</b></span>';
                        _service_html += '<select class="layui-select" lay-search name="service" lay-filter="getservice">';
                        _service_html += '<option value="0" data-name="" data-content="">请选择</option>';
                        $.each(_services,function(i,v) {
                             _service_html += '<option value="'+v.service_id+'" data-name="'+v.name+'" data-content="'+v.summary+'">'+v.name+'</option>';
                        })
                        _service_html += '</select>';
                    _service_html += '</label>';
                    _service_html += '<div class="showserviceDetail">';
                        _service_html += '<label class="layui-form-item block relative">';
                            _service_html += '<span class="help-label"><b>服务名称:</b></span>';
                            _service_html += '<div class="service_name"></div>';
                        _service_html += '</label>';
                        _service_html += '<label class="layui-form-item block relative">';
                            _service_html += '<span class="help-label"><b>服务内容:</b></span>';
                            _service_html += '<div class="service_content"></div>';
                        _service_html += '</label>';
                    _service_html += '</div>';
                    _service_html += '</div>';
                $(".service_list").append(_service_html);
                form.render();
                searchClose();
        }
        function searchClose(){
             $(".service_close").unbind().on('click',function(){
                    $(this).parent().remove();
                })
        }
        function Close(){
            $(".close").unbind().on('click',function(){
                $(this).parent().remove();
            })
        }
        function cateClose(){
            $(".cateid_close").unbind().on('click',function(){
                //移除元素
                let _close_cate_id = $(this).attr('data-data')
                let _close_index = _cate_select_ids.indexOf(_close_cate_id)
                _cate_select_ids.splice(_close_index,1);

                $("input[name='cateids']").val(_cate_select_ids.join(','))
                $(this).parent().remove();
            })
        }
        function getRand(length, prefix) {
            return (function (time, code) {
                code += parseInt(time.substring(0, 1)) + parseInt(time.substring(1, 2)) + time.substring(2);
                while (code.length < length) code += Math.round(Math.random() * 10);
                return code;
            })(Date.now().toString(), prefix || '' + '')
        }
        function addSku(){
            var sku = getRand(14,'S')
            var _html = '<div style="display:inline-block; position:relative;" class="border-line padding-20 margin-right-10 pull-left">';
                _html+='<div style="position:absolute;right:10px;top: 0;color:red;cursor:pointer;" class="close">X</div>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>规格名称</b></span>';
                _html+='<input class="layui-input" name="itemname[]" placeholder="请输入规格名称" required value="">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>规格型号</b></span>';
                _html+='<input class="layui-input" name="skumodel[]" placeholder="请输入规格型号" value="">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>SKU</b></span>';
                _html+='<input class="layui-input padding-left-0 text-center" placeholder="请输入规格SKU" required name="sku[]" value="'+sku+'">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>规格封面</b></span>';
                _html+='<div class="help-images">';
                _html+='<input name="itemcover" data-max-width="500" data-max-height="500" type="hidden" value="">';
                _html+='<input name="itemcover1[]" type="hidden" value="" class="imgpath">';
                _html+='</div>';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>市场价</b></span>';
                _html+='<input class="layui-input  padding-left-0 text-center" placeholder="请输入市场价" name="market[]">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>实际销售价</b></span>';
                _html+='<input class="layui-input padding-left-0 text-center" placeholder="请输入销售价" required name="selling[]">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>库存</b></span>';
                _html+='<input class="layui-input padding-left-0 text-center" placeholder="请输入库存" name="stock_total[]">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>虚拟销售量</b></span>';
                _html+='<input class="layui-input padding-left-0 text-center" placeholder="请输入虚拟销售量" name="virtual[]">';
                _html+='</label>';


                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>排序</b></span>';
                _html+='<input type="number" class="layui-input  padding-left-0 text-center" required placeholder="请输入市场价" name="sort[]" value="0">';
                _html+='</label>';
                _html+='<label class="layui-form-item block relative">';
                _html+='<span class="help-label"><b>销售状态</b></span>';
                _html+='<label class="think-checkbox margin-0 full-width full-height block">';
                _html+='<input lay-ignore name="status[]" type="checkbox">';
                _html+='</label>';
                _html+='</label>';
                _html+='</div>';
                $(".sku_list").append(_html);
                Close();
                $('[name="itemcover"]').uploadOneImage();
        }
    /*! 加载扩展插件 */
    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="content"]', {height: 500});
    });
</script>
{/block}
